<style>
.container{height: 100%;width: 100%;}
.middle{width: 240px;margin: 30px auto;}
.calculator {
    padding: 5px;
    border-color:  #5897fb;
    border-radius: 6px;
    border-style: solid;
    border-width: 1px;
    background:  #aecff7;
}
    input[type=button],input[type=submit]{
    background-color: #5D89E8;
    background-image: -moz-linear-gradient(center top , #5D89E8 0%, #2261E0 50%, #044BD9 50%, #0D53DE 100%);
    cursor: pointer;
    border-color: #1F58CC #1B4DB3 #174299;
    border-radius: 4px 4px 4px 4px;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 0 2px 0 rgba(57, 140, 255, 0.8) inset;
    color: #FFFFFF;
    font: bold 12px "helvetica neue",helvetica,arial,sans-serif;
    padding: 7px 0;
    text-shadow: 0 -1px 1px #1A5AD9;
    width: 55px;

    }

    .digitsplus td{padding: 5px 0px;}
    td.forbigbutton {padding-right: 7px;}

    input[type=button]:hover,input[type=submit]:hover{   background-color: #759AE9;
       background-image: -moz-linear-gradient(center top , #759AE9 0%, #376FE0 50%, #1A5AD9 50%, #2463DE 100%);
    }


</style>
<div class="container">
    <div class="middle">
       <div class="calculator">
        <form action="" method="post">

         <table class="digitsplus">
            <tr>
              <td colspan="4">
                  <input type="text" name="counter" maxlength="12" size="24" class="counter"  placeholder="0" value="<?=$this->output?>">
              </td>
            </tr>
           <tr>
             <td><input type="button" class="members" value="1"> </td>
             <td><input type="button" class="members" value="2"> </td>
             <td><input type="button" class="members" value="3"> </td>
             <td><input type="button" class="reset" value="C"> </td>
           </tr>

            <tr>
             <td><input type="button" class="members" value="4"> </td>
             <td><input type="button" class="members" value="5"> </td>
             <td><input type="button" class="members" value="6"> </td>
             <td><input type="button" class="members" value="+"> </td>
           </tr>
            <tr>

           </tr>
            <td><input type="button" class="members" value="7"> </td>
             <td><input type="button" class="members" value="8"> </td>
             <td><input type="button" class="members" value="9"> </td>
             <td><input type="button" class="members" value="*"> </td>
            <tr>
             <td><input type="button" class="members" value="0" > </td>
             <td colspan="2" class="forbigbutton"><input type="button" class="members" style="width: 100%;" value="."> </td>
             <td><input type="button" class="members" value="-"> </td>

           </tr>

            <tr>
                <td colspan="3" class="forbigbutton"> <input type="submit" value="=" style="width: 100%;"></td>
                <td><input type="button" class="members" value="/"> </td>
            </tr>
        </table>




        </form>
       </div>
       <div style="padding-top:20px;"><a href="/index/viewcalculation" style="color: #5897fb">View all results!</a></div>
     </div>
</div>
<script type="text/javascript" src="/js/jquery-1.6.2.min.js"></script>
<script type="text/javascript">


$(document).ready(function(){

    $('.reset').click(function(){
        $('.counter').val("");

    });

    $('input[type=button]:not(.reset)').each(function(){
     $(this).click(function(){
         var result=$('.counter').val()+this.value;
       $('.counter').val(result);
     }) ;



    });
    

     


});
</script>